<template>
  <div>
    <!-- 面板屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索和添加 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入内容"
                    suffix-icon="el-icon-search"
                    v-model="queryParams.query"
                    @change="getUserList"
                    @clear="getUserList">
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-button type="success"
                     @click="dialogFormVisible = true">添加用户</el-button>
          <el-dialog title="用户信息"
                     :visible.sync="dialogFormVisible">
            <el-form :model="addform">
              <el-form-item label="姓名"
                            :label-width="formLabelWidth">
                <el-input v-model="addform.username"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱"
                            :label-width="formLabelWidth">
                <el-input v-model="addform.email"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话"
                            :label-width="formLabelWidth">
                <el-input v-model="addform.mobile"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="角色"
                            :label-width="formLabelWidth">
                <el-input v-model="addform.role_name"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="状态"
                            :label-width="formLabelWidth">
                <el-radio v-model="addform.mg_state"
                          label="0">true</el-radio>
              </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="danger"
                         @click="editend">编辑完成</el-button>
              <el-button type="danger"
                         @click="addUser">添加用户</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="UserList"
              border
              style="width: 100%">
      <el-table-column type="index"
                       width="50">
      </el-table-column>
      <el-table-column prop="username"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="180">
      </el-table-column>
      <el-table-column prop="mobile"
                       label="电话">
      </el-table-column>
      <el-table-column prop="role_name"
                       label="角色">
      </el-table-column>
      <el-table-column prop="mg_state"
                       label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state"
                     active-color="#13ce66"
                     inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 删除 修改 设置 -->
        <template slot-scope="scope">
          <el-row>
            <el-button type="primary"
                       icon="el-icon-edit"
                       @click="editUser(scope.row)"
                       circle></el-button>
            <el-button type="primary"
                       icon="el-icon-delete"
                       @click="deleteUser(scope.row.id)"
                       circle></el-button>
            <el-button type="danger"
                       icon="el-icon-setting"
                       circle
                       @click="setting">
            </el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!--分页的使用
      @size-change pagesize 改变时触发
      @current-change pagenum改变时触发
      current-page 当前页码
      page-sizes 设置每页显示的条数
      total 总计路数
     -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryParams.pagenum"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="queryParams.pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      UserList: [],
      queryParams: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      index: 0,
      tryid: 0,
      dialogFormVisible: false,
      addform: {
        username: '',
        email: '',
        mobile: '',
        role_name: '',
        mg_state: false
      },
      formLabelWidth: '120px'
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('/users', { params: this.queryParams })
      this.UserList = res.data.users
      this.total = res.data.total
    },
    trychange () {
      alert('change调用')
    },
    editUser (item) {
      this.index = item.id
      console.log(this.index)
      console.log(item)
      this.addform = item
      this.dialogFormVisible = true
    },
    editend () {
      this.UserList[this.index].id = this.index
      this.UserList[this.index].username = this.addform.username
      this.UserList[this.index].email = this.addform.email
      this.UserList[this.index].mobile = this.addform.mobile
      this.UserList[this.index].mg_state = this.addform.mg_state
      this.UserList[this.index].role_name = this.addform.role_name
      this.dialogFormVisible = false
    },
    clear () {
      // addform数据全清空
      this.addform.username = ''
      this.addform.email = ''
      this.addform.mobile = ''
      this.addform.mg_state = false
      this.addform.role_name = ''
      this.dialogFormVisible = false
    },
    addUser () {
      var item = {
        id: this.tryid,
        username: this.addform.username,
        email: this.addform.email,
        mobile: this.addform.mobile,
        mg_state: this.addform.mg_state,
        role_name: this.addform.role_name
      }
      this.UserList.push(item)
      this.tryid = this.tryid + 1
      this.clear()
    },
    deleteUser (id) {
      var index = this.UserList.findIndex(function (item) {
        return item.id === id
      })
      // 根据索引删除数组元素
      this.UserList.splice(index, 1)
    },
    setting () {
      alert('这是设置按钮')
    },
    handleSizeChange (pagesize) {
      this.queryParams.pagesize = pagesize
      this.getUserList()
    },
    handleCurrentChange (currentpage) {
      this.queryParams.pagenum = currentpage
      this.getUserList()
    }
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 15px;
  margin-bottom: 15px;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>
